<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #demo {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            padding: 10px;
            margin: 50px;
            overflow: auto;
            /* box-sizing: border-box; */
            /* display: none; */
        }

        .sub {
            width: 400px;
            height: 1000px;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .active {
            background-color: #f00 !important;
        }
    </style>
</head>

<body>
    <div id="demo" class="one two three">
        <div class="sub"></div>
    </div>
</body>
<script>
    var demo = document.getElementById("demo");

    // 元素的可视宽高 实际宽高 滚动条的位置
    // 优点: 元素节点的属性,直接使用 => 快捷获取
    // 缺点:
    //  a. 只能做取值(获取),不能赋值
    //  b. 可视宽高,实际宽高 组成部分中包含padding
    //  c. 对于隐藏的元素属性不生效 => 0

    // clientWidth / clientHeight  可视宽高 (content + padding)
    console.log("可视宽高", demo.clientWidth);
    console.log("可视宽高", demo.clientHeight);

    // scrollWidth / scrollHeight  实际宽高
    console.log("实际宽高", demo.scrollWidth);
    console.log("实际宽高", demo.scrollHeight);

    // scrollLeft / scrollTop
    // console.log(demo.scrollLeft);
    // console.log(demo.scrollTop);

    demo.onscroll = function () {
        console.log("元素中滚动条的位置", demo.scrollLeft, demo.scrollTop);
    }






    // 文档的可视宽高 实际宽高 滚动条的位置(html)
    // document.documentElement.clientWidth
    // document.documentElement.clientHeight

    // document.documentElement.scrollWidth
    // document.documentElement.scrollHeight

    // document.documentElement.scrollLeft
    // document.documentElement.scrollTop

    // 传统方法获取宽高
    console.log(getStyle(demo, "width"));
    console.log(getStyle(demo, "height"));

    console.log(parseInt(getStyle(demo, "width")));
    console.log(parseInt(getStyle(demo, "height")));

    function getStyle(ele, key) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(ele)[key];
        } else {
            return ele.currentStyle[key];
        }
    }

</script>

</html>